<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>纯悦</title>

		<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

		<script type="text/javascript">
			document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px';
		</script>

		<link rel="stylesheet" type="text/css" href="css/common.css" />
	</head>

	<body class="lottery">
		<div class="pop_bg"></div>
		<div class="pop_box loading" id="loadding"><img src="img/loading.gif" width="32" /></div>
		<div class="pop_box" id="success">
			<div class="pop_title">恭喜你</div>
			<!--
			--  pop_gift_cdb.png 迷你充电宝
			--  pop_gift_cy.png 550ml纯悦
			--  pop_gift_nsd.png 暖手袋
			--  pop_gift_wj.png 围巾
			-->
			<img class="pop_gift" src="img/pop_gift_cdb.png" width="100%"/>
			<p>获得<span>迷你充电宝</span></p>
			<button id="gotoForm">我要去领奖</button>
		</div>
		<div class="pop_box loading" id="loadding"><img src="img/loading.gif" width="32" /></div>
		<div class="pop_box" id="failed">
			<div class="pop_title">真遗憾</div>
			<img class="pop_gift" src="img/pop_gift_none.png" width="100%"/>
			<button style="margin-top: 0.1rem;">再试一次</button>
		</div>
		
		
		
		<div class="page_lottery">
			<img src="img/lottery_title.png" width="100%" />
			<div class="zhuanpan">
				<img id="img" src="img/four_zhuanpan.png" width="100%" />
				<img id="tip" src="img/four.png" width="100%" />
			</div>
			<img src="img/lottery_middle.png" width="100%" />
			<div class="box">
				<div class="rule_title">活动规则</div>
				<div class="rule_content">
					<p>1、活动时间：2018.11.8-2018.11.18，为期10天；</p>
					<p>2、每位微信用户可多次抽奖，但仅能中奖一次。</p>
					<p>3、抽中奖品后需填写姓名+电话+地址等信息兑奖，活动期间未完善收货信息或信息填写有误则视为弃权；</p>
					<p>4、活动综合中奖率15%，特等奖（1份）、一等奖（3份）、二等奖（100份）、三等奖（1080份），礼品兑完为止；</p>
					<p>5、礼品将于活动中奖后15日内寄出；</p>
					<p>6、本活动仅限上海、苏州、无锡、嘉兴、南通区域的粉丝参与；</p>
				</div>
			</div>
		</div>

		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jQueryRotate.2.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var roll = function() {
				$(this).unbind("click", roll);
				var angle = 0;
				var num = 0;
				var zhuan = setInterval(function() {
					angle += 20;
					num++;
					$("#img").rotate(angle);
					if(num >= 100) {
						$("#tip").bind("click", roll);
						clearInterval(zhuan);
						//60莫灰心，120充电宝，180围巾，240莫灰心，300暖手宝
						$("#img").rotate(180);
						$('.pop_bg').show();
						$('#loadding').show();
						setTimeout(function() {
							$('#loadding').hide();
							$('#success').show();
							//$('#failed').show();
						}, 3000);
					}
				}, 30);
			}

			$("#tip").bind("click", roll);
			
			$('#gotoForm').click(function(e){
				window.location.href = "form.html";
			})
		</script>
	</body>

</html>